<!-- EasyMedia + flv
https://gitee.com/aqie-task/EasyMedia    
http://192.168.20.149:5175/easyMedia?rtspUrl=rtsp://admin:hk12345678@192.168.10.212:554/Streaming/Channels/101
ws://localhost:8866/live?url=rtsp://admin:hk12345678@192.168.10.213:554/Streaming/Channels/101&&&ffmpeg=true

-->
<template>
    <div class="video-box">
      <video controls="controls" class="demo-video" ref="player" muted  @dblclick="fullScreen"></video>
    </div>
  </template>
   
  <script>
  import flvjs from 'flv.js'
  import qs from 'qs';
  export default {
    name: 'Home',
    components: {},
    data () {
      return {
        player: null,
        loading: true,
        rtsp: '',
      }
    },
    mounted () {
      this.rtsp = qs.parse(location.search.slice(1)).rtspUrl || '';
      this.rtsp = this.rtsp.trim()
      console.log('rtsp:', this.rtsp)
      this.playVideo()
      console.log('mounted')
    },
    watch: {
      rtsp: {
        handler: function (val) {
          if (val) {
            if (this.player) {
              this.player.unload()
              // this.player.detachMediaElement();
              this.player.destroy()
              this.player = null
              this.loading = true
            }
            this.$nextTick(() => {
              this.playVideo()
            })
          }
        },
        immediate: true
      }
    },
    methods: {
      fullScreen() {
        const video = this.$refs.player;
        if (video) {
          if (video.requestFullscreen) {
            video.requestFullscreen();
          } else if (video.mozRequestFullScreen) {
            video.mozRequestFullScreen();
          } else if (video.webkitRequestFullscreen) {
            video.webkitRequestFullscreen();
          }
        }
      },
      playVideo () {
        const time1 = new Date().getTime()
        if (flvjs.isSupported()) {
          let video = this.$refs.player
          if (video  && this.rtsp) {
            this.player = flvjs.createPlayer({
              type: 'flv',
              isLive: true,
              url: `ws://192.168.20.149:8866/live?url=${this.rtsp}`
   
            })
            this.player.attachMediaElement(video)
            try {
              this.player.load()
              //this.player.on('canplay', () => {
                this.player.play().then(() => {
                  console.log(new Date().getTime() - time1)
                  this.loading = false
                })
              //})
            } catch (error) {
              console.log(error)
            }
          }
        }
      }
    },
    beforeDestroy () {
      if (this.player) {
        this.player.unload()
        //this.player.detachMediaElement();
        this.player.destroy()
        this.player = null
      }
    }
  }
  </script>
  <style>
  .video-box {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
    background-color: black;
  }
  video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  video::-webkit-media-controls-play-button {
    display: none;
  }
  video::-webkit-media-controls-current-time-display {
    display: none;
  }
  video::-webkit-media-controls-timeline {
    display: none;
  }
  </style>
   
   